<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/all.min.css" rel="stylesheet">
    <title>月度工作日</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #fff;
            margin: 0;
            padding: 20px;
        }

        .controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        select,
        button {
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: white;
            font-size: 14px;
        }

        button {
            cursor: pointer;
            background-color: #7259b5;
            color: white;
            border: none;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #667eea;
        }

        .table-container {
            overflow-x: auto;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
            min-width: 80px;
        }

        th {
            background-color: #667eea;
            color: white;
            position: sticky;
            top: 0;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        .year-header {
            background-color: #e9e9e9;
            font-weight: bold;
        }

        .total-row {
            font-weight: bold;
            background-color: #e1f5fe;
        }

        .highlight {
            background-color: #764ba2;
            color: #dbcd84;
        }

        .year-total {
            background-color: #e8f5e9;
            font-weight: bold;
        }

        .month-avg {
            background-color: #fff3e0;
            font-weight: bold;
        }

        .current-day {
            background-color: #ffeb3b;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                align-items: flex-start;
            }

            select,
            button {
                width: 100%;
            }
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 5px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 节假日和补班日期显示区域样式 */
        .holiday-container {
            margin-top: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }

        .holiday-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .holiday-group {
            margin-bottom: 15px;
        }

        .holiday-group-header {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .holiday-group-header i {
            margin-right: 5px;
        }

        .holiday-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 10px 0;
        }

        .holiday-item {
            padding: 8px 12px;
            border-radius: 4px;
            margin-right: 10px;
            margin-bottom: 10px;
            white-space: nowrap;
        }

        .holiday-item.holiday {
            background-color: #ffebee;
            color: #d32f2f;
        }

        .holiday-item.workday {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
    </style>
</head>

<body>
    <div>
        <div class="controls">
            <select id="yearSelect">
                <!-- 动态生成选项 -->
            </select>
            <button id="prevYear"><i class="fas fa-chevron-left"></i> 上一年</button>
            <button id="nextYear">下一年 <i class="fas fa-chevron-right"></i></button>
            <button id="currentYear">当前年份</button>
            <button id="exportBtn"><i class="fas fa-download"></i> 导出数据</button>
        </div>
        <div class="table-container">
            <table id="workdaysTable">
                <thead>
                    <tr>
                        <th>年份/月份</th>
                        <!-- 动态生成月份表头 -->
                    </tr>
                </thead>
                <tbody>
                    <!-- 动态生成表格内容 -->
                </tbody>
                <tfoot>
                    <!-- 动态生成总计行 -->
                </tfoot>
            </table>
        </div>

        <!-- 新增：节假日和补班日期显示区域 -->
        <div class="holiday-container">
            <div class="holiday-header">
                <i class="fas fa-calendar-alt mr-2"></i>
                <span id="holidayYear">2025</span>年 节假日和补班日期
            </div>
            
            <!-- 节假日显示区域 -->
            <div class="holiday-group">
                <div class="holiday-group-header">
                    <i class="fas fa-umbrella-beach text-red-500"></i>
                    <span class="text-red-600">节假日</span>
                </div>
                <div class="holiday-list" id="holidaysList">
                    <!-- 动态生成节假日 -->
                </div>
            </div>
            
            <!-- 补班日期显示区域 -->
            <div class="holiday-group">
                <div class="holiday-group-header">
                    <i class="fas fa-briefcase text-green-600"></i>
                    <span class="text-green-600">补班日期</span>
                </div>
                <div class="holiday-list" id="workdaysList">
                    <!-- 动态生成补班日期 -->
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="modalMessage"></p>
        </div>
    </div>
    <script>
        const currentYear = new Date().getFullYear();
        const currentMonth = new Date().getMonth();
        const currentDay = new Date().getDate();
        const startYear = currentYear - 4;
        const yearSelect = document.getElementById('yearSelect');
        const workdaysTable = document.getElementById('workdaysTable');
        const prevYearBtn = document.getElementById('prevYear');
        const nextYearBtn = document.getElementById('nextYear');
        const currentYearBtn = document.getElementById('currentYear');
        const exportBtn = document.getElementById('exportBtn');
        const modal = document.getElementById('myModal');
        const span = document.getElementsByClassName("close")[0];
        const modalMessage = document.getElementById('modalMessage');
        const holidayYear = document.getElementById('holidayYear');
        const holidaysList = document.getElementById('holidaysList');
        const workdaysList = document.getElementById('workdaysList');

        // 工作日数据 (根据国务院办公厅发布的放假安排)
        const workdaysData = {
            2021: [21, 20, 23, 21, 20, 21, 22, 22, 21, 19, 22, 23],
            2022: [21, 16, 23, 21, 20, 21, 21, 23, 21, 18, 22, 21],
            2023: [18, 20, 23, 20, 21, 21, 21, 23, 20, 19, 22, 21],
            2024: [22, 18, 21, 22, 21, 19, 23, 22, 21, 19, 21, 22],
            2025: [19, 20, 21, 22, 21, 20, 23, 22, 21, 19, 21, 22]
        };

       const holidayData = {
            2021: [
                // 元旦（无调休）
                { date: '1-1', name: '元旦', type: 'holiday' },
                
                // 春节
                { date: '2-7', name: '补班', type: 'workday' },   // 周日（春节调休）
                { date: '2-11', name: '除夕', type: 'holiday' },
                { date: '2-12', name: '春节', type: 'holiday' },
                { date: '2-13', name: '春节', type: 'holiday' },
                { date: '2-14', name: '春节', type: 'holiday' },
                { date: '2-15', name: '春节', type: 'holiday' },
                { date: '2-16', name: '春节', type: 'holiday' },
                { date: '2-17', name: '春节', type: 'holiday' },
                { date: '2-20', name: '补班', type: 'workday' },  // 周六（春节调休）

                // 清明节
                { date: '4-3', name: '清明节', type: 'holiday' },
                { date: '4-4', name: '清明节', type: 'holiday' },
                { date: '4-5', name: '清明节', type: 'holiday' },
                
                // 劳动节
                { date: '5-1', name: '劳动节', type: 'holiday' },
                { date: '5-2', name: '劳动节', type: 'holiday' },
                { date: '5-3', name: '劳动节', type: 'holiday' },
                { date: '5-4', name: '劳动节', type: 'holiday' },
                { date: '5-5', name: '劳动节', type: 'holiday' },
                { date: '5-8', name: '补班', type: 'workday' },   // 周六（劳动节调休）

                // 端午节
                { date: '6-12', name: '端午节', type: 'holiday' },
                { date: '6-13', name: '端午节', type: 'holiday' },
                { date: '6-14', name: '端午节', type: 'holiday' },

                // 中秋节
                { date: '9-18', name: '补班', type: 'workday' },  // 周六（中秋调休）
                { date: '9-26', name: '补班', type: 'workday' },  // 周日（中秋调休）
                { date: '9-19', name: '中秋节', type: 'holiday' },
                { date: '9-20', name: '中秋节', type: 'holiday' },
                { date: '9-21', name: '中秋节', type: 'holiday' },

                // 国庆节
                { date: '10-1', name: '国庆节', type: 'holiday' },
                { date: '10-2', name: '国庆节', type: 'holiday' },
                { date: '10-3', name: '国庆节', type: 'holiday' },
                { date: '10-4', name: '国庆节', type: 'holiday' },
                { date: '10-5', name: '国庆节', type: 'holiday' },
                { date: '10-6', name: '国庆节', type: 'holiday' },
                { date: '10-7', name: '国庆节', type: 'holiday' },
                { date: '10-9', name: '补班', type: 'workday' }    // 周六（国庆调休）
            ],
            2022: [
                // 元旦（无调休）
                { date: '1-1', name: '元旦', type: 'holiday' },
                { date: '1-2', name: '元旦', type: 'holiday' },
                { date: '1-1', name: '元旦', type: 'holiday' },
                
                // 春节
                { date: '1-29', name: '补班', type: 'workday' },  // 周六（春节调休）
                { date: '1-30', name: '补班', type: 'workday' },  // 周日（春节调休）
                { date: '1-31', name: '除夕', type: 'holiday' },
                { date: '2-1', name: '春节', type: 'holiday' },
                { date: '2-2', name: '春节', type: 'holiday' },
                { date: '2-3', name: '春节', type: 'holiday' },
                { date: '2-4', name: '春节', type: 'holiday' },
                { date: '2-5', name: '春节', type: 'holiday' },
                { date: '2-6', name: '春节', type: 'holiday' },

                // 清明节
                { date: '4-2', name: '补班', type: 'workday' },   // 周六（清明调休）
                { date: '4-3', name: '清明节', type: 'holiday' },
                { date: '4-4', name: '清明节', type: 'holiday' },
                { date: '4-5', name: '清明节', type: 'holiday' },

                // 劳动节
                { date: '4-24', name: '补班', type: 'workday' },  // 周日（劳动节调休）
                { date: '5-1', name: '劳动节', type: 'holiday' },
                { date: '5-2', name: '劳动节', type: 'holiday' },
                { date: '5-3', name: '劳动节', type: 'holiday' },
                { date: '5-4', name: '劳动节', type: 'holiday' },
                { date: '5-7', name: '补班', type: 'workday' },   // 周六（劳动节调休）

                // 端午节
                { date: '6-3', name: '端午节', type: 'holiday' },
                { date: '6-4', name: '端午节', type: 'holiday' },
                { date: '6-5', name: '端午节', type: 'holiday' },

                // 中秋节
                { date: '9-10', name: '中秋节', type: 'holiday' },
                { date: '9-11', name: '中秋节', type: 'holiday' },
                { date: '9-12', name: '中秋节', type: 'holiday' },

                // 国庆节
                { date: '10-1', name: '国庆节', type: 'holiday' },
                { date: '10-2', name: '国庆节', type: 'holiday' },
                { date: '10-3', name: '国庆节', type: 'holiday' },
                { date: '10-4', name: '国庆节', type: 'holiday' },
                { date: '10-5', name: '国庆节', type: 'holiday' },
                { date: '10-6', name: '国庆节', type: 'holiday' },
                { date: '10-7', name: '国庆节', type: 'holiday' },
                { date: '10-8', name: '补班', type: 'workday' },  // 周六（国庆调休）
                { date: '10-9', name: '补班', type: 'workday' }   // 周日（国庆调休）
            ],
            2023: [
                // 元旦（无调休）
                { date: '1-1', name: '元旦', type: 'holiday' },
                
                // 春节
                { date: '1-21', name: '除夕', type: 'holiday' },
                { date: '1-22', name: '春节', type: 'holiday' },
                { date: '1-23', name: '春节', type: 'holiday' },
                { date: '1-24', name: '春节', type: 'holiday' },
                { date: '1-25', name: '春节', type: 'holiday' },
                { date: '1-26', name: '春节', type: 'holiday' },
                { date: '1-27', name: '春节', type: 'holiday' },
                { date: '1-28', name: '补班', type: 'workday' },  // 周六（春节调休）
                { date: '1-29', name: '补班', type: 'workday' },  // 周日（春节调休）

                // 清明节
                { date: '4-5', name: '清明节', type: 'holiday' },

                // 劳动节
                { date: '4-23', name: '补班', type: 'workday' },  // 周日（劳动节调休）
                { date: '4-29', name: '劳动节', type: 'holiday' },
                { date: '4-30', name: '劳动节', type: 'holiday' },
                { date: '5-1', name: '劳动节', type: 'holiday' },
                { date: '5-2', name: '劳动节', type: 'holiday' },
                { date: '5-3', name: '劳动节', type: 'holiday' },
                { date: '5-6', name: '补班', type: 'workday' },   // 周六（劳动节调休）

                // 端午节
                { date: '6-22', name: '端午节', type: 'holiday' },
                { date: '6-23', name: '端午节', type: 'holiday' },
                { date: '6-24', name: '端午节', type: 'holiday' },

                // 中秋节 + 国庆节
                { date: '9-29', name: '中秋节', type: 'holiday' },
                { date: '9-30', name: '国庆节', type: 'holiday' },
                { date: '10-1', name: '国庆节', type: 'holiday' },
                { date: '10-2', name: '国庆节', type: 'holiday' },
                { date: '10-3', name: '国庆节', type: 'holiday' },
                { date: '10-4', name: '国庆节', type: 'holiday' },
                { date: '10-5', name: '国庆节', type: 'holiday' },
                { date: '10-6', name: '国庆节', type: 'holiday' },
                { date: '10-7', name: '国庆节', type: 'holiday' },
                { date: '10-8', name: '补班', type: 'workday' }   // 周日（国庆调休）
            ],
            2024: [
                // 元旦（无调休）
                { date: '1-1', name: '元旦', type: 'holiday' },
                
                // 春节
                { date: '2-4', name: '补班', type: 'workday' },   // 周日（春节调休）
                { date: '2-9', name: '除夕', type: 'holiday' },
                { date: '2-10', name: '春节', type: 'holiday' },
                { date: '2-11', name: '春节', type: 'holiday' },
                { date: '2-12', name: '春节', type: 'holiday' },
                { date: '2-13', name: '春节', type: 'holiday' },
                { date: '2-14', name: '春节', type: 'holiday' },
                { date: '2-15', name: '春节', type: 'holiday' },
                { date: '2-16', name: '春节', type: 'holiday' },
                { date: '2-17', name: '补班', type: 'workday' },  // 周六（春节调休）
                { date: '2-18', name: '补班', type: 'workday' },  // 周日（春节调休）

                // 清明节
                { date: '4-4', name: '清明节', type: 'holiday' },
                { date: '4-5', name: '清明节', type: 'holiday' },
                { date: '4-6', name: '清明节', type: 'holiday' },
                { date: '4-7', name: '补班', type: 'workday' },   // 周日（清明调休）
                { date: '4-28', name: '补班', type: 'workday' },  // 周日（劳动节调休）

                // 劳动节
                { date: '5-1', name: '劳动节', type: 'holiday' },
                { date: '5-2', name: '劳动节', type: 'holiday' },
                { date: '5-3', name: '劳动节', type: 'holiday' },
                { date: '5-4', name: '劳动节', type: 'holiday' },
                { date: '5-5', name: '劳动节', type: 'holiday' },
                { date: '5-11', name: '补班', type: 'workday' },  // 周六（劳动节调休）

                // 端午节
                { date: '6-8', name: '端午节', type: 'holiday' },
                { date: '6-9', name: '端午节', type: 'holiday' },
                { date: '6-10', name: '端午节', type: 'holiday' },

                // 中秋节
                { date: '9-15', name: '补班', type: 'workday' },  // 周日（中秋调休）
                { date: '9-16', name: '中秋节', type: 'holiday' },
                { date: '9-17', name: '中秋节', type: 'holiday' },

                // 国庆节
                { date: '10-1', name: '国庆节', type: 'holiday' },
                { date: '10-2', name: '国庆节', type: 'holiday' },
                { date: '10-3', name: '国庆节', type: 'holiday' },
                { date: '10-4', name: '国庆节', type: 'holiday' },
                { date: '10-5', name: '国庆节', type: 'holiday' },
                { date: '10-6', name: '国庆节', type: 'holiday' },
                { date: '10-7', name: '国庆节', type: 'holiday' },
                { date: '10-12', name: '补班', type: 'workday' }  // 周六（国庆调休）
            ],
            2025: [
                // 元旦
                { date: '1-1', name: '元旦', type: 'holiday' },
                
                // 春节
                { date: '1-26', name: '补班', type: 'workday' },  // 周日（春节调休）
                { date: '1-28', name: '除夕', type: 'holiday' },
                { date: '1-29', name: '春节', type: 'holiday' },
                { date: '1-30', name: '春节', type: 'holiday' },
                { date: '1-31', name: '春节', type: 'holiday' },
                { date: '2-1', name: '春节', type: 'holiday' },
                { date: '2-2', name: '春节', type: 'holiday' },
                { date: '2-3', name: '春节', type: 'holiday' },
                { date: '2-8', name: '补班', type: 'workday' },   // 周六（春节调休）

                // 清明节
                { date: '4-4', name: '清明节', type: 'holiday' },
                { date: '4-5', name: '清明节', type: 'holiday' },
                { date: '4-6', name: '清明节', type: 'holiday' },
                { date: '4-27', name: '补班', type: 'workday' },  // 周日（劳动节调休）

                // 劳动节
                { date: '5-1', name: '劳动节', type: 'holiday' },
                { date: '5-2', name: '劳动节', type: 'holiday' },
                { date: '5-3', name: '劳动节', type: 'holiday' },
                { date: '5-4', name: '劳动节', type: 'holiday' }, // 周日，实际为假期
                { date: '5-5', name: '劳动节', type: 'holiday' },

                // 端午节（2025年不调休）
                { date: '5-31', name: '端午节', type: 'holiday' },
                { date: '6-1', name: '端午节', type: 'holiday' },
                { date: '6-2', name: '端午节', type: 'holiday' },

                // 中秋节 + 国庆节
                { date: '9-28', name: '补班', type: 'workday' },  // 周日（国庆调休）
                { date: '9-29', name: '中秋节', type: 'holiday' },
                { date: '9-30', name: '中秋节', type: 'holiday' },
                { date: '10-1', name: '国庆节', type: 'holiday' },
                { date: '10-2', name: '国庆节', type: 'holiday' },
                { date: '10-3', name: '国庆节', type: 'holiday' },
                { date: '10-4', name: '国庆节', type: 'holiday' },
                { date: '10-5', name: '国庆节', type: 'holiday' },
                { date: '10-6', name: '国庆节', type: 'holiday' },
                { date: '10-7', name: '国庆节', type: 'holiday' },
                { date: '10-11', name: '补班', type: 'workday' }  // 周六（国庆调休）
            ]
        };

        // 填充年份选择框
        function populateYearSelect() {
            yearSelect.innerHTML = '';
            for (let year = startYear; year <= currentYear; year++) {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year;
                if (year === currentYear) {
                    option.selected = true;
                }
                yearSelect.appendChild(option);
            }
        }

        // 填充表格内容
        function populateTable(year) {
            const thead = workdaysTable.getElementsByTagName('thead')[0];
            const tbody = workdaysTable.getElementsByTagName('tbody')[0];
            const tfoot = workdaysTable.getElementsByTagName('tfoot')[0];

            // 清空表格
            thead.innerHTML = '';
            tbody.innerHTML = '';
            tfoot.innerHTML = '';

            // 创建表头行
            const headerRow = document.createElement('tr');
            const yearHeader = document.createElement('th');
            yearHeader.textContent = '年份/月份';
            headerRow.appendChild(yearHeader);

            // 添加月份表头
            const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            monthNames.forEach((month, index) => {
                const th = document.createElement('th');
                th.textContent = month;

                // 高亮当前月份
                if (year === currentYear && index === currentMonth) {
                    th.classList.add('highlight');
                }

                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);

            // 添加数据行
            const dataRow = document.createElement('tr');
            const yearCell = document.createElement('td');
            yearCell.textContent = year;
            yearCell.classList.add('year-header');
            dataRow.appendChild(yearCell);

            const workdays = workdaysData[year] || Array(12).fill(0);
            let yearTotal = 0;

            // 添加每月数据
            workdays.forEach((days, index) => {
                const td = document.createElement('td');
                td.textContent = days;

                // 高亮当前月份
                if (year === currentYear && index === currentMonth) {
                    td.classList.add('highlight');

                    // 如果是当前月份，计算并显示已过工作日和剩余工作日
                    if (currentDay > 1) {
                        const passedDays = Math.floor(days * (currentDay / 30)); // 简单估算
                        const remainingDays = days - passedDays;
                        td.innerHTML = `${days}<br><small>已过: ${passedDays} 剩余: ${remainingDays}</small>`;
                    }
                }

                dataRow.appendChild(td);
                yearTotal += days;
            });
            tbody.appendChild(dataRow);

            // 添加月平均行
            const avgRow = document.createElement('tr');
            const avgLabel = document.createElement('td');
            avgLabel.textContent = '月平均（天）';
            avgLabel.classList.add('month-avg');
            avgRow.appendChild(avgLabel);

            // 计算并显示月平均
            const monthlyAvg = (yearTotal / 12).toFixed(1);
            const avgTd = document.createElement('td');
            avgTd.textContent = monthlyAvg;
            avgTd.colSpan = 12;
            avgTd.classList.add('month-avg');
            avgRow.appendChild(avgTd);
            tfoot.appendChild(avgRow);

            // 添加年总计行
            const totalRow = document.createElement('tr');
            const totalLabel = document.createElement('td');
            totalLabel.textContent = '年总计（天）';
            totalLabel.classList.add('total-row');
            totalRow.appendChild(totalLabel);

            const totalTd = document.createElement('td');
            totalTd.textContent = yearTotal;
            totalTd.colSpan = 12;
            totalTd.classList.add('total-row');
            totalRow.appendChild(totalTd);
            tfoot.appendChild(totalRow);
        }

        // 填充节假日和补班日期
        function populateHolidays(year) {
            holidayYear.textContent = year;
            holidaysList.innerHTML = '';
            workdaysList.innerHTML = '';

            const holidays = holidayData[year] || [];

            if (holidays.length === 0) {
                holidaysList.innerHTML = '<div class="holiday-item">暂无数据</div>';
                workdaysList.innerHTML = '<div class="holiday-item">暂无数据</div>';
                return;
            }

            // 分离节假日和补班日期
            const holidayItems = holidays.filter(item => item.type === 'holiday');
            const workdayItems = holidays.filter(item => item.type === 'workday');

            // 显示节假日
            if (holidayItems.length > 0) {
                holidayItems.forEach(item => {
                    const holidayItem = document.createElement('div');
                    holidayItem.className = 'holiday-item holiday';
                    holidayItem.innerHTML = `${item.date}=${item.name}`;
                    holidaysList.appendChild(holidayItem);
                });
            } else {
                holidaysList.innerHTML = '<div class="holiday-item">暂无数据</div>';
            }

            // 显示补班日期
            if (workdayItems.length > 0) {
                workdayItems.forEach(item => {
                    const workdayItem = document.createElement('div');
                    workdayItem.className = 'holiday-item workday';
                    workdayItem.innerHTML = `${item.date}=${item.name}`;
                    workdaysList.appendChild(workdayItem);
                });
            } else {
                workdaysList.innerHTML = '<div class="holiday-item">暂无数据</div>';
            }
        }

        // 导出数据为CSV
        function exportToCSV() {
            const year = parseInt(yearSelect.value);
            const workdays = workdaysData[year] || Array(12).fill(0);
            const yearTotal = workdays.reduce((sum, days) => sum + days, 0);
            const monthlyAvg = (yearTotal / 12).toFixed(1);

            let csv = '月份,工作日数\n';

            const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            monthNames.forEach((month, index) => {
                csv += `${month},${workdays[index]}\n`;
            });

            csv += `月平均,${monthlyAvg}\n`;
            csv += `年总计,${yearTotal}\n`;

            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.setAttribute('href', url);
            link.setAttribute('download', `${year}年工作日统计.csv`);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 初始加载
        populateYearSelect();
        populateTable(currentYear);
        populateHolidays(currentYear);

        // 选择年份时更新表格和节假日
        yearSelect.addEventListener('change', function () {
            const selectedYear = parseInt(this.value);
            populateTable(selectedYear);
            populateHolidays(selectedYear);
        });

        // 上一年按钮
        prevYearBtn.addEventListener('click', function () {
            const currentSelected = parseInt(yearSelect.value);
            if (currentSelected > startYear) {
                yearSelect.value = currentSelected - 1;
                populateTable(currentSelected - 1);
                populateHolidays(currentSelected - 1);
            } else {
                modalMessage.textContent = '已经是第一年了';
                modal.style.display = "block";
            }
        });

        // 下一年按钮
        nextYearBtn.addEventListener('click', function () {
            const currentSelected = parseInt(yearSelect.value);
            if (currentSelected < currentYear) {
                yearSelect.value = currentSelected + 1;
                populateTable(currentSelected + 1);
                populateHolidays(currentSelected + 1);
            } else {
                modalMessage.textContent = '已经是最新年份了';
                modal.style.display = "block";
            }
        });

        // 当前年份按钮
        currentYearBtn.addEventListener('click', function () {
            yearSelect.value = currentYear;
            populateTable(currentYear);
            populateHolidays(currentYear);
        });

        // 导出按钮
        exportBtn.addEventListener('click', exportToCSV);

        // 关闭模态框
        span.onclick = function () {
            modal.style.display = "none";
        }

        // 点击模态框外关闭模态框
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>

</html>